<template>
    <!-- 详情页 -->
    <div id="appCapsule">
      <div class="card no_bgcolor pt-3" ref="allarea">
          <div class="card-header justify-content-start border-bottom-0" ref="fixarea1">
              <h1 class="font-weight-600 my-3" style="font-size: 45px">{{word}}</h1>
              <span class="text-primary font-size-18 root_word" v-if="isNaN(root_word)">({{root_word}})</span>
          </div>
          <div class="word-helper" ref="fixarea2">
            <h3>
              <div v-for="meaning_item in meanings" class="meaning_container">
                <span class="Part_of_speech mx-2">{{meaning_item['part_of_speech']}}</span>
                <span class="Interpretation">{{meaning_item['definition']}}</span>
              </div>
            </h3>
          </div>

          <div class="else-info-area" :style="{height:scrollHeight}">
              <div class="box">
                  <div class="card-text text-wrap my-3" v-for="sentence_item in sentences" style="padding-left: 0.5rem">
                      {{sentence_item['content']}}
                  </div>
              </div>

              <div class="other-info-box">
                  <div class="box" v-if="isNaN(collocations)">
                    <p class="mt-1">固定搭配:</p>
                      <div class="card-body">
                          <p v-for="collocation_item in collocations">{{ collocation_item.content }}</p>
                      </div>
                  </div>

                  <div class="box" v-if="isNaN(relative_words)">
                      <p class="mt-1">形近词辨析:</p>
                      <div class="card-body">
                          <p v-for="relative_word_item in relative_words">{{ relative_word_item.content }}</p>
                      </div>
                  </div>
              </div>
          </div>
        <div class="tool-box d-flex justify-content-around" ref="fixarea3">
          <button class="btn btn-info" @click="$emit('button-error')">记错了</button>
          <button class="btn btn-success" @click="$emit('button-accept')">下一词</button>
        </div>
      </div>
    </div>
</template>
<script>
import {computed, defineComponent, onMounted, reactive, ref, watch,inject} from "vue";
import {all} from "axios";

export default defineComponent({
    name: 'WordStudyDetail',
    props: ['message'],
    setup(props){
        const message = props.message;
        const word = ref('');
        const root_word = ref('');
        const meanings = reactive([]);
        const sentences = reactive([]);
        const collocations = reactive([]);
        const relative_words = reactive([]);
        
        onMounted(()=>{
            word.value = message['word'];
            root_word.value = message['root_word'];
            meanings.push(...message['meanings']);
            sentences.push(...message['sentences']);
            collocations.push(...message['collocations']);
            relative_words.push(...message['relative_words']);
            if (fixarea1.value && fixarea2.value && fixarea3.value && allarea.value){
              // 获取高度
              const totalFixedHeight = fixarea1.value.offsetHeight + fixarea2.value.offsetHeight + fixarea3.value.offsetHeight * 2.5 + 80;
              console.log(totalFixedHeight)
              scrollHeight.value = (allarea.value.offsetHeight - totalFixedHeight) + 'px';
              console.log(scrollHeight.value)
            }
        })

        const fixarea1 = ref(null)
        const fixarea2 = ref(null)
        const fixarea3 = ref(null)
        const allarea = ref(null)

        const scrollHeight = ref('')

        return{
            word,
            root_word,
            meanings,
            sentences,
            collocations,
            relative_words,
            scrollHeight,
            fixarea1,
            fixarea2,
            fixarea3,
            allarea,
        }
    }
})
</script>
<style lang="scss" scoped>
body.dark-mode {
  .box{
    color:#A1A5AE;
  }
}
.no_bgcolor{
  background: none;
}

#appCapsule{
  height: 100vh;
  padding-bottom: 0;
}

.else-info-area {
  overflow-y: scroll;
  padding:1rem 1rem;
}

.card{
  height: 100%;
}

.box{
    font-size: 18px;
    padding:0 0.5rem;
    word-wrap: break-word;
    border: rgba(192,192,192,0.6) solid 1px;
    background-color: rgba(255, 255, 255, .2);
    box-shadow: 0 2px 4px rgba(128, 128, 128, .8);
    color: #1d2024;
    border-radius: 3%;
    margin-top: 1rem;
  }

.root_word{
  margin-left: 10px;
}

.meaning_container{
  margin-left: 20px;
}

.tool-box{
    min-height: 56px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    .btn {
      width: 11rem;
      height: 3rem;
      font-size: 18px;
      font-weight: bold;
      opacity: 0.5;
    }
}

</style>